<template>
    <div class="layout-content">
        <div class="layout-content-main">
            <Breadcrumb class="content-title mbt1">
                <BreadcrumbItem>消息服务</BreadcrumbItem>
            </Breadcrumb>
            <div class="section">
                <div class="section-title">
                    消息服务
                </div>
                <Row class="mbt4">
                     <Col span="6">
    
                        <Input v-model="searchMessage" placeholder="请输入消息标题">

                        <Button slot="append" icon="ios-search" @click="search()"></Button>
                        </Input>
                    </Col>

                    <Col span="18" class="text-right">
                    <Button type="primary" size="large" @click="addMessageModal=true">添加消息</Button>
                    </Col>
                </Row>
                <Table border :columns="columns7" :data="messageList" class="mbt4" :page-size='9'></Table>
                <Page :total="messageListNum"  show-total class="center" @on-change="changePage" :page-size="9"></Page>
                <!-- 添加消息start -->
                <Modal v-model="addMessageModal" title="添加消息" class="mediumSize-Modal">
                    <Form label-position="right" ref="addMessage" :model="addMessage" :rules="ruleValidate" :label-width="100">
                        <Row>
                            <Col span="24">
                  
                                <FormItem label="code:" prop="messageCode">
                                        <Input :maxlength="15" v-model="addMessage.messageCode"></Input>
                                </FormItem>
                            </Col>
                            <Col span="24">
                                <FormItem label="消息标题:" prop="messageTitle">
                                        <Input :maxlength="25" v-model="addMessage.messageTitle"></Input>
                                </FormItem>
                            </Col>
                            <Col span="24">
                                <FormItem label="消息内容:" prop="messageContent">
                                    <Input :maxlength="255" v-model="addMessage.messageContent" type="textarea" :autosize="{minRows: 5,maxRows: 5}" placeholder="请输入..."></Input>
                                </FormItem>
                            </Col>
                            <!-- <Col class="userDefined-footer mtp2" span="24">
   
                                <Button @click="addMessageModal=false">取消</Button>
                                <Button type="primary" @click="saveMessgae('addMessage')">保存</Button>
                            </Col> -->
                        </Row>
                      
                    </Form>


                    <div slot="footer">
                          <Button @click="addMessageModal=false">取消</Button>
                          <Button type="primary" @click="saveMessgae('addMessage')">保存</Button>
                        </div>
                </Modal>
                <!-- 添加消息startend-->
            <!-- 编辑消息start -->
                <Modal v-model="editMessageModal" title="编辑消息" class="mediumSize-Modal">
                    <Form label-position="right" ref="editMessage" :model="editMessage" :rules="ruleValidate" :label-width="100">
                        <Row>
                            <!-- <Col span="24">
                       
                                <FormItem label="code:" prop="messageCode">
                                        <Input v-model="editMessage.messageCode"></Input>
                                </FormItem>
                            </Col> -->
                            <Col span="24">
                            <FormItem label="消息标题:" prop="messageTitle">
                                 <Input :maxlength="25" v-model="editMessage.messageTitle"></Input>
                            </FormItem>

                            </Col>
                            <Col span="24">
                            <FormItem label="消息内容:" prop="messageContent">
                                <Input :maxlength="255" v-model="editMessage.messageContent" type="textarea" :autosize="{minRows: 5,maxRows: 5}" placeholder="请输入..."></Input>
                            </FormItem>
                            </Col>
                            
                        </Row>
                    </Form>
                    <div slot="footer">
                       <Button @click="editMessageModal=false">取消</Button>
                       <Button type="primary" @click="saveMessgae('editMessage')">保存</Button>
                    </div>
                </Modal>
                <!-- 编辑消息end-->


            </div>
        </div>
    </div>
</template>

<script>
export default {
  data() {
    return {
      pageNum: 1,
      pageSize: 9,
      messageList: [],
      messageListNum: 0,
      addMessageModal: false,
      editMessageModal: false,

      searchMessage: "",
      addMessage: {
        messageCode: "",
        messageTitle: "",
        messageContent: ""
      },
      editMessage: {
        Id: "",
        messageTitle: "",
        messageContent: ""
      },

      ruleValidate: {
        messageCode: [{ required: true, message: "code不能为空", trigger: "blur" }],
        messageTitle: [
          { required: true, message: "消息标题不能为空", trigger: "blur" }
        ],
        messageContent: [
          { required: true, message: "消息内容不能为空", trigger: "blur" }
        ]
      },
      columns7: [
        {
          title: "添加时间",
          key: "createTime",
          align: "center",
          width: "300",
          render: (h, params) => {
            // console.log(params.row.createTime)

            return new Date(parseInt(params.row.createTime))
              .toLocaleString()
              .replace(/:\d{1,2}$/, " ");
          }
        },
        {
          title: "消息标题",
          key: "messageTitle",
          align: "center"
        },

        {
          title: "消息内容",
          key: "messageContent",
          align: "center"
        },
        {
          title: "操作",
          key: "action",
          width: 400,
          align: "center",
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    size: "small"
                  },
                  style: {
                    marginRight: "10px"
                  },
                  on: {
                    click: () => {
                      // this.show(params.index)
                     // console.log(params.row.id);
                      this.editMessageModal = true;
                      this.editMessage.id = params.row.id;
                      this.showMessageContent(params);
                    }
                  }
                },
                "编辑"
              ),
              h(
                "Button",
                {
                  props: {
                    size: "small"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      // this.show(params.index)
                      //this.chooseJurisdictionModal = true;
                      this.remove(params);
                    }
                  }
                },
                "删除"
              )
            ]);
          }
        }
      ]
    };
  },
  mounted() {
    this.getMessageList(this.pageNum, this.pageSize,'');
  },
  methods: {
    //获取消息列表
    getMessageList(pageNum, pageSize,searchValue) {
      //搜索功能暂时未做
      this.$ajax
        .post(
          "/api/MessageSet/info/queryPageMessage",
          `pageNum=${pageNum}&pageSize=${pageSize}&messageTitle=${searchValue}`
        )
        .then(response => {
         // console.log(response.data.resdata);
          if (response.data.code == 1) {
            this.messageList = response.data.resdata.list;
            this.messageListNum = response.data.resdata.total;
          } else {
            this.$Modal.error({
              title: "错误",
              content: response.data.msg
            });
          }
        })
        .catch(error => {
          this.$Modal.error({
            title: "错误",
            content: error
          });
        });
    },
    //回显消息内容
    showMessageContent(params) {
      this.$ajax
        .post("/api/MessageSet/info/queryMessageById", `Id=${params.row.id}`)
        .then(response => {
         // console.log(response.data);
          if (response.data.code == 1) {
            this.editMessage = response.data.resdata;
          }else{
              this.$Modal.error({
            title: "错误",
            content: response.data.msg
          });
          }
        })
        .catch(error => {
          this.$Modal.error({
            title: "错误",
            content: error
          });
        });
    },
    //保存添加的消息 并验证
    saveMessgae(name) {
      this.$refs[name].validate(valid => {
        if (name == "addMessage") {
          if (valid) {
            //this.$Message.success('提交成功!');
            this.$ajax
              .post("/api/MessageSet/info/insertMessage", this.addMessage)
              .then(response => {
                //console.log(response.data);
                if (response.data.code == 1) {
                  this.$Message.success(response.data.msg);
                  this.getMessageList(this.pageNum, this.pageSize,'');
                  this.addMessageModal = false;
                  //清空表单
                  this.$refs[name].resetFields();
                } else {
                  this.$Modal.error({
                    title: "错误",
                    content: response.data.msg
                  });
                }
              })
              .catch(error => {
                this.$Modal.error({
                  title: "错误",
                  content: error
                });
              });
          } else {
            this.$Message.error("请完善表单内容!");
          }
        } else if (name == "editMessage") {
          if (valid) {
            //this.$Message.success('提交成功!');
            this.$ajax
              .post("/api/MessageSet/info/updateMessage", this.editMessage)
              .then(response => {
                //console.log(response.data);
                if (response.data.code == 1) {
                  this.$Message.success(response.data.msg);
                  this.getMessageList(this.pageNum, this.pageSize,'');
                  this.editMessageModal = false;
                } else {
                  this.$Modal.error({
                    title: "错误",
                    content: response.data.msg
                  });
                }
              })
              .catch(error => {
                this.$Modal.error({
                  title: "错误",
                  content: error
                });
              });
          } else {
            this.$Message.error("请完善表单内容!");
            this.addMessageModal= true
          }
        }
      });
    },
    search(){
      this.getMessageList(this.pageNum, this.pageSize,this.searchMessage);
    },
    remove(params) {
      // this.data6.splice(index, 1);
      this.$Modal.confirm({
        title: "警告",
        content: "<p>确定要删除吗？删除后将无法恢复 !</p>",
        onOk: () => {
          //this.data6.splice(index, 1);
          this.$ajax
            .post("/api/MessageSet/info/deleteMessage", `Id=${params.row.id}`)
            .then(response => {
              // console.log(response.data);
              if (response.data.code == 1) {
                this.$Message.success(response.data.msg);
                this.messageList.splice(params.index, 1);
              }
            })
            .catch(error => {
              this.$Modal.error({
                title: "错误",
                content: error
              });
            });
        },
        onCancel: () => {
          this.$Message.info("点击了取消");
        }
      });
    },
    changePage(data) {
      // console.log(data);

      //分页查询
      this.getMessageList(data, this.pageSize,this.searchMessage);
    }
  }
};
</script>

<style>

</style>
